<template>
    <div>
        <r-dialog v-model="show" width="70%"
        @close="close">
            <template #header>
                详情
            </template>

            <template #default>
                <h1 style="text-align: center; font-size: 1.5em; color: black">{{ props.info.name }}</h1>
                <table style="width: 90%; margin: 0 auto">
                    <tr>
                        <td>名称</td>
                        <td>{{ props.info.name }}</td>
                    </tr>
                    <tr>
                        <td>编号</td>
                        <td>
                            <span>{{props.info.card}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>项目类型</td>
                        <td>
                            <span>{{props.info.type}}</span>
                        </td>
                    </tr>

                    <tr>
                        <td>名称</td>
                        <td colspan="3">
                            <span>{{props.info.name}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>开始时间</td>
                        <td>
                            <!-- <input type="datetime-local" :value="nowTime"/> -->
                            <span>{{ props.info.start_time }}</span>
                        </td>
                        </tr>
                        <tr>
                        <td>预计结束时间</td>
                        <td>
                                <span>{{ props.info.end_time }}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>负责人</td>
                        <td>
                            <span>{{ props.info.user }}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>执行人</td>
                        <td><span>{{ props.info.user }}</span></td>
                    </tr>

                    <tr>
                        <td>进度(%)</td>
                        <td>
                            <span>{{ props.info.progress }}</span>
                        </td>
                        </tr>
                        <tr>
                        <td>内容</td>
                        <td colspan="3">
                            <span>{{ props.info.context }}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>状态</td>
                        <td>
                            <span>{{ props.info.status }}</span>
                        </td>
                    </tr>
                </table>
            </template>

            <template #footer>
                <el-button size="small" type="primary">保存(S)</el-button>
            </template>
        </r-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const show = ref(true)
const props = defineProps({
    info: {
        default: {},
        type: Object
    },
    guanbi:{
        type: Function,
        default:()=>{}
    }
})
console.log(props.info, 'xq页面')
const close=()=>{
    props.guanbi()
}
</script>

<style lang="scss" scoped>
tr{
    height: 30px;
    line-height: 30px;
}
tr>td:nth-child(1){
    text-align: right;
    padding-right: 10px;
}
tr>td:nth-child(2){
    text-align: left;
}
</style>